<template>
  <div :id="id" :ref="refValue"></div>
</template>

<script>
import Player from "xgplayer";

export default {
  name: "XgVideoPlayer",
  props: {
    id: {
      type: Number,
      default: "video-player",
    },
    refValue: {
      type: String,
      default: "video-player",
    },
    width: {
      type: Number,
      default: 800,
    },
    height: {
      type: Number,
      default: 600,
    },
    url: {
      required: true,
      type: String,
    },
    lastPlayTime: {
      type: Number,
      default: 0,
    },
    poster: {
      type: String,
      default: "",
    },
    autoplay: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      player: undefined,
    };
  },
  mounted() {
    this.initPlayer();
    console.log(this.url, this.id, "ssssss");
  },
  methods: {
    initPlayer() {
      if (this.player) {
        this.player.destroy(true);
      }
      this.player = new Player({
        // width: this.width,
        // height: this.height,
        width: "7.5rem",
        height: "4.2rem",
        id: this.id,
        url: this.url,
        autoplay: this.autoplay,
        videoInit: true,
        // playbackRate: [0.5, 0.75, 1, 1.5, 2],
        defaultPlaybackRate: 1,
        lastPlayTime: this.lastPlayTime, //视频起播时间（单位：秒）
        lastPlayTimeHideDelay: 5, //提示文字展示时长（单位：秒）
        fitVideoSize: "auto",
        volume: 0.6,
      });
      this.player.on("play", () => {
        this.$emit("onPlay", { player: this.player });
        console.log(this.$emit("onPlay", { player: this.player }));
      });

      this.player.on("pause", () => {
        this.$emit("onPause", { player: this.player });
      });
      this.player.on("playing", () => {
        this.$emit("onPlaying", { player: this.player });
      });
      this.player.on("ended", () => {
        this.$emit("onEnded", { player: this.player });
      });
    },
  },
  watch: {
    url: {
      handler(newVal, oldVal) {
        this.initPlayer();
      },
      deep: true,
      immediate: false,
    },
  },
};
</script>

<style  scoped>
</style>
